<template>
  <view class="venuePage">
    <view class="head" :style="[{ height: customBar + 'px' }]">
      <u-navbar
        title="场馆详情"
        :autoBack="true"
        :titleStyle="{ fontSize: '34rpx', fontWeight: '500' }"></u-navbar>
    </view>
    <view class="banner">
      <image class="img" :src="HTTP_IMG_URL() + obj.images"></image>
    </view>
    <view class="introduce">
      <view class="recordTop">
        <image
          class="img"
          src="@/static/reservation/recordSp.png"
          mode="widthFix"></image>
        {{ obj.name }}
      </view>
      <view class="reservationLable">
        <view class="label_green" v-for="(v, i) in obj.labels">
          {{ v }}
        </view>
      </view>
      <view class="line">场馆介绍：{{ obj.desc }}</view>
      <view class="line">
        <view class="content">
          <image
            class="img"
            src="@/static/reservation/time.png"
            mode="widthFix"></image>
          营业时间：{{ obj.business_hours }}
        </view>
        <view class="content">
          <image
            class="img"
            src="@/static/reservation/tel.png"
            mode="widthFix"></image>
          联系方式：{{ obj.contact }}
        </view>
        <view class="content">
          <image
            class="img"
            src="@/static/reservation/address.png"
            mode="widthFix"></image>
          地址：{{ obj.address_text }}
        </view>
      </view>
      <view class="line" style="border: 0; padding: 24rpx 0 0 0">
        价格：￥{{ obj.day_price }}/天，￥{{ obj.hours_price }}/时
      </view>
    </view>
    <view class="introduce" style="margin-top: 30rpx">
      <view class="recordTops">
        相册（{{ obj.album_images.split(",").length }}）
        <view class="all" @click="handleAll">
          全部
          <image
            class="right"
            src="@/static/reservation/right.png"
            mode="widthFix"></image>
        </view>
      </view>
      <view class="albumBox">
        <view
          class="list"
          v-for="(imgV, o) in obj.album_images.split(',')"
          :key="o">
          <image class="img" :src="HTTP_IMG_URL() + imgV"></image>
        </view>
      </view>
    </view>
    <view style="height: 220rpx"></view>
    <view class="footer">
      <view class="money" @click="handleSure">去预约</view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import { HTTP_IMG_URL } from "../../config/app.js";
export default {
  data() {
    return {
      customBar: 99,
      obj: "",
      id: "",
    };
  },
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  onLoad(params) {
    this.id = params.id;
    this.getDetail(params.id);
  },
  methods: {
    HTTP_IMG_URL() {
      return HTTP_IMG_URL;
    },
    handleAll() {
      uni.navigateTo({
        url: "/pages/reservation/album?img=" + this.obj.album_images,
      });
    },
    handleSure() {
      uni.navigateTo({
        url: "/pages/reservation/reserve?id=" + this.id,
      });
    },
    getDetail(id) {
      var that = this;
      that.$Api.reservation
        .stadiumDetail({
          id: id,
        })
        .then((res) => {
          this.obj = res.data;
        });
    },
  },
};
</script>

<style lang="scss">
.venuePage {
  height: 100%;
  min-height: 100vh;
  font-family: PingFang SC;
  background: #f5f5f4;
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
  .head {
    background: #fff;
  }
  .banner {
    width: 100%;
    height: 420rpx;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .introduce {
    width: 688rpx;
    background: #ffffff;
    box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.1);
    border-radius: 28rpx;
    margin: -30rpx auto 0;
    position: relative;
    padding: 34rpx;
    box-sizing: border-box;
    .recordTop {
      display: flex;
      align-items: center;
      .img {
        width: 34rpx;
        margin-right: 10rpx;
      }
    }
    .recordTops {
      display: flex;
      align-items: center;
      justify-content: space-between;
      .img {
        width: 34rpx;
        margin-right: 10rpx;
      }
    }
    .all {
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      display: flex;
      align-items: center;
      .right {
        width: 16rpx;
        margin-left: 10rpx;
      }
    }
    .reservationLable {
      display: flex;
      margin-top: 24rpx;
      flex-wrap: wrap;

      .label_green {
        padding: 5rpx 20rpx;
        color: #a3c616;
        background: rgba(163, 198, 22, 0.2);
        border-radius: 40rpx;
        font-size: 24rpx;
        margin-right: 10rpx;
        margin-top: 10rpx;
      }
    }
    .line {
      padding: 24rpx 0;
      font-weight: 400;
      font-size: 28rpx;
      color: #565656;
      line-height: 48rpx;
      border-bottom: 1px #e6e5e5 solid;
      .content:first-child {
        margin-top: 0;
      }
      .content {
        display: flex;
        align-items: center;
        margin-top: 20rpx;
        .img {
          width: 34rpx;
          margin-right: 10rpx;
        }
      }
    }
    .albumBox {
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      margin-top: 20rpx;
      .list {
        width: 194rpx;
        height: 136rpx;
        margin-right: 19rpx;
        margin-bottom: 19rpx;
        .img {
          width: 194rpx;
          height: 136rpx;
        }
      }
      .list:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
  .footer {
    width: 100%;
    height: 190rpx;
    position: fixed;
    // bottom: calc(env(safe-area-inset-bottom) / 2);
    bottom: 0;
    background: #fff;
    box-shadow: 0rpx -4rpx 8rpx 0rpx rgba(0, 0, 0, 0.1);
    padding: 20rpx 38rpx;
    box-sizing: border-box;

    .money {
      width: 100%;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      color: #fff;
      background: #a3c616;
      box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(163, 198, 22, 0.3);
      border-radius: 24rpx;
      font-weight: 500;
      font-size: 34rpx;
      margin-top: 18rpx;
    }
  }
}
</style>
